<template>
  <div class="trading_purchase">
    <div class="purchase">
      <div class="header_nav">
        <div class="sort">
          <div class="new" @click="select(0)" :class="{'sel': selection === 0}">
            <span>New</span>
            <i class="iconfont icon-shaixuan"></i>
          </div>
          <div class="new" @click="select(1)" :class="{'sel': selection === 1}">
            <span>Price</span>
            <i class="iconfont icon-xiangshang" v-if="isUp"></i>
            <i class="iconfont icon-xiangshang1" v-if="!isUp"></i>
            <!-- <i class="iconfont icon-xiangshang"></i> -->
          </div>
        </div>
        <div class="sel_amount">
          <span>Number</span>
          <div class="screening">
            <input type="number" class="option" placeholder="minimum" v-model="minAmount">
            <span> ~ </span>
            <input type="number" class="option" placeholder="Highest" v-model="maxAmount">
            <button class="option confirm" @click="submitSearch">Sure</button>
          </div>
        </div>
      </div>
      <div class="scroll_wrap" @scroll="toggleHead" ref="dataBox">
        <ul class="purchase_list">
          <li class="public_none_data" v-if="!purchaseList.length && isRequest">Orders with no satisfactory conditions</li>
          <li class="purchase_item" v-for="(item, index) in purchaseList" :key="index">
            <div class="item_title">
              <div class="left_wrap">
                <div class="img_wrap">
                  <img :src="item.avatar" alt="">
                </div>
                <span class="name">{{item.username}}</span>
              </div>
              <span class="public_s_btn" @click="purchase(item.id)">purchase</span>
            </div>
            <div class="price_wrap">
              <div class="amount">
                <span class="price_option number">{{item.xxm_num}}</span>
                <span>Quantity(YTCC)</span>
              </div>
              <div class="amount">
                <span class="price_option price">{{item.xxm_price}}</span>
                <span>Unit Price(CNY)</span>
              </div>
              <div class="amount">
                <span class="price_option total">{{item.rmb}}</span>
                <span>Total price(CNY)</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mask" v-if="isPurchase">
      <div class="sure">
        <p class="sure_title">Determine the purchase</p>
        <ul class="msg_wrap">
          <li class="msg_item">
            <span>Seller's nickname</span>
            <span>{{sellerName}}</span>
          </li>
          <li class="msg_item">
            <span>Total quantityYTCC</span>
            <span>{{amount}}</span>
          </li>
          <li class="msg_item">
            <span class="total_cny">Unit Price<span>(CNY)</span></span>
            <span class="single_price">{{singlePrice}}</span>
          </li>
          <li class="msg_item">
            <span class="total_cny">Total price<span>(CNY)</span></span>
            <span class="total">{{total}}</span>
          </li>
        </ul>
        <div class="operate_btn">
          <span class="cancel" @click="close">cancel</span>
          <span class="confirm" @click="getInfo">Confirm the purchase</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tradingPurchase',
  data () {
    return {
      selection: 0,
      isUp: false,
      minAmount: '',
      maxAmount: '',
      purchaseList: [],
      sellerName: '',
      amount: null,
      singlePrice: '',
      total: '',
      orderId: null,
      isPurchase: false,
      trueName: '',
      idCard: '',
      navList: [
        {
          title: 'Purchase',
          path: 'tradingPurchase'
        },
        {
          title: 'Sell out',
          path: 'tradingSale'
        },
        {
          title: 'My order',
          path: 'order'
        }
      ],
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true // Do you have more data?
    };
  },
  watch: {
    showDate () {
      this.page = 1;
      this.isRequest = false;
      this.hasMoreData = true;
      this.purchaseList = [];
      this.getData();
    }
  },
  computed: {
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  beforeMount () {
    this.getData();
  },
  methods: {
    // Rolling events
    toggleHead (e) {
      let withBottomScroll = document.querySelector('.purchase_list').clientHeight - (this.$refs.dataBox.clientHeight + this.$refs.dataBox.scrollTop);
      console.log(this.$refs.dataBox.scrollTop);
      if (withBottomScroll < 50 && this.canRequest && this.hasMoreData) {
        this.getData();
      }
    },
    // Sort by choice
    select (num) {
      this.selection = num;
      if (num === 1) {
        this.isUp = !this.isUp;
      }
      this.page = 1;
      this.isRequest = false;
      this.hasMoreData = true;
      this.purchaseList = [];
      this.getData();
    },
    // purchase
    purchase (id) {
      this.isPurchase = true;
      this.axios.post('index/tradinghall/sell_purchase_page', {
        ids: id
      }).then(({data}) => {
        if (data.status === 200) {
          this.sellerName = data.data.username;
          this.amount = data.data.xxm_num;
          this.singlePrice = data.data.xxm_price;
          this.total = data.data.rmb;
          this.orderId = data.data.id;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Submitting a search
    submitSearch () {
      if (parseFloat(this.minAmount) > parseFloat(this.maxAmount)) {
        this.Toast('Please enter the correct number of intervals.');
      }
      this.page = 1;
      this.isRequest = false;
      this.hasMoreData = true;
      this.purchaseList = [];
      this.getData();
    },
    // Close the details
    close () {
      this.isPurchase = false;
    },
    // Confirm the purchase
    confirm () {
      this.close();
      this.ShowPassword(() => {
        this.axios.post('index/tradinghall/sell_purchase', {
          ids: this.orderId,
          pass: this.passWord
        }).then(({data}) => {
          if (data.status === 200) {
            this.Toast('Purchase success');
            this.$router.replace({path: 'order', query: {orderIndex: 0}});
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // get data
    getData () {
      this.canRequest = false;
      this.axios.post('index/tradinghall/sell_hall', {
        type: this.selection === 0 ? 1 : '',
        page: this.page,
        purse: this.selection === 1 ? (this.isUp ? 2 : 1) : '',
        num: this.minAmount,
        max: this.maxAmount
      }).then(({data}) => {
        this.isRequest = true;
        if (data.status === 200) {
          this.canRequest = true;
          this.page++;
          // Array obtained
          let resObj = data.data;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          }
          this.purchaseList = this.purchaseList.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.confirm();
        } else {
          this.isPurchase = false;
          this.Modal('Set transaction password', 'Only after setting the transaction password can you purchase the operation., Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    },
    // get data
    getInfo () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 200) {
          this.trueName = data.data.username;
          this.idCard = data.data.id_card;
          if (!this.trueName || !this.idCard) {
            this.close();
            this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
              this.$router.push('certification');
            });
          } else {
            this.isSetPwd();
          }
        } else if (data.status === 201) {
          if (!this.trueName || !this.idCard) {
            this.close();
            this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
              this.$router.push('certification');
            });
          }
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .trading_purchase{
    background-color: #f5f5f5;
    height: 100%;
    display: flex;
    flex-direction: column;
    .nav_list{
      width: 100%;
      display: flex;
      height: 86px;
      position: absolute;
      top: 90px;
      left: 0;
      background-color: #fff;
      .nav_item{
        flex: 1;
        height: 100%;
        line-height: 86px;
        text-align: center;
        font-size: 28px;
        color: #999;
        &.active{
          color: $color;
        }
      }
      &::after{
        display: block;
        content: '';
        width: 33.33%;
        height: 4px;
        background-color: $color;
        position: absolute;
        bottom: 0;
        transition: left .3s linear;
      }
      &.active0::after{
        content: '';
        left: 0;
      }
      &.active1::after{
        content: '';
        left: 33.33%;
      }
      &.active2::after{
        content: '';
        left: 66.66%;
      }
    }
    .purchase{
      width: 100%;
      padding: 0 30px;
      flex: 1;
      display: flex;
      flex-direction: column;
      .header_nav{
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        font-size: 24px;
        color: #999;
        margin-bottom: 8px;
        .sort{
          display: flex;
          align-items: center;
          .new{
            margin-right: 20px;
            white-space: nowrap;
            .iconfont{
              font-size: 20px;
              transition: all 2s;
            }
            .icon-xiangshang, .icon-xiangshang1{
              transition: all 2s;
            }
            &.sel{
              color: #608af9;
            }
          }
        }
        .sel_amount{
          display: flex;
          align-items: center;
          >span{
            margin-right: 18px;
          }
          .screening{
            display: flex;
            align-items: center;
            .option{
              display: inline-block;
              width: 100px;
              height: 48px;
              line-height: 48px;
              text-align: center;
              background-color: #fff;
              border: 1px solid #e6e6e6;
              border-radius: 6px;
            }
            .confirm{
              background-color: #e6eaf5;
              margin-left: 10px;
              font-size: 24px;
              color: #999;
            }
          }
        }
      }
      .scroll_wrap{
        flex: 1;
        overflow-y: auto;
        .purchase_list{
          width: 100%;
          position: relative;
          .purchase_item{
            width: 100%;
            border-radius: 10px;
            background-color: #fff;
            margin-bottom: 20px;
            .item_title{
              width: 100%;
              height: 94px;
              padding: 0 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px solid #e6e6e6;
              .left_wrap{
                display: flex;
                align-items: center;
                .img_wrap{
                  width: 64px;
                  height: 64px;
                  border-radius: 50%;
                  margin-right: 14px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .name{
                  font-size: 28px;
                  color: #666;
                }
              }
            }
            .price_wrap{
              width: 100%;
              padding: 38px 0 36px 0;
              display: flex;
              .amount{
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 24px;
                color: #999;
                .price_option{
                  font-size: 30px;
                  font-weight: 600;
                  margin-bottom: 24px;
                  &.number{
                    color: #282828;
                  }
                  &.price{
                    color: $color;
                  }
                  &.total{
                    color: #fe6e3a;
                  }
                }
              }
            }
          }
        }
      }
    }
    .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, .6);
      z-index: 99;
      .sure{
        width: 76%;
        padding-top: 40px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .sure_title{
          width: 100%;
          font-size: 28px;
          color: #212121;
          text-align: center;
          margin-bottom: 42px;
        }
        .msg_wrap{
          width: 100%;
          margin-bottom: 78px;
          padding: 0 30px;
          .msg_item{
            width: 100%;
            height: 88px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            font-size: 26px;
            color: #666;
            .total_cny{
              span{
                color: #999;
              }
            }
            .single_price{
              color: $color;
            }
            .total{
              color: #fe6e3a;
            }
          }
        }
        .operate_btn{
          width: 100%;
          height: 86px;
          border-top: 1px solid #e6e6e6;
          display: flex;
          font-size: 26px;
          .cancel{
            width: 50%;
            height: 100%;
            line-height: 86px;
            text-align: center;
            background-color: #fff;
            color: #282828;
            border-radius: 0 0 0 10px;
          }
          .confirm{
            width: 50%;
            height: 100%;
            line-height: 86px;
            text-align: center;
            background-color: $color;
            color: #fff;
            border-radius: 0 0 10px 0;
          }
        }
      }
    }
  }
</style>
